<template>
	<view>
		<view class="status_bar">
		  <!-- 这里是状态栏 -->
		</view>
		<view class="top">
			<view class="top-tool">
				<u-search placeholder="片名/演员" v-model.trim="keyword" :animation="true" :clearabled="true" @custom="searchStart()"></u-search>
			</view>
		</view>
		<view class="record">
			<view class="record_head" style="display: flex;" v-if="hList.length > 0">
				<view class="title" style="width: 50%;">历史记录</view>
				<view class="del" style="width: 50%;text-align: right;"><u-icon name="trash" size="32" @click="delhistory"></u-icon></view>
			</view>
			<view class="record_content" style="margin-top: 20rpx;" >
				<text class="item" v-for="(item,index) in hList" :key="index" @click="keywordsClick(item)">{{item}}</text>
				<!-- <text class="item">火蓝刀锋</text> -->
			</view>
		</view>
		<view class="hot">
			<view class="hot_head">
				<view class="title" style="width: 50%;">热播榜</view>
			</view>
			<view class="hot_content" style="margin-top: 20rpx;">
				<text class="item1" v-for="(item,index) in hotWords" :key="index" @click="keywordsClick(item)"><image v-if="index==0" src="../../static/hot.png" mode="aspectFit" style="width: 30rpx;height: 30rpx;"></image><image v-else  src="../../static/rm.png" mode="aspectFit" style="width: 30rpx;height: 30rpx;"></image>{{item}}</text>
				<!-- <text class="item1"><image  src="../../static/rm.png" mode="aspectFit" style="width: 30rpx;height: 30rpx;"></image>火蓝刀锋</text>
				<text class="item1">微微一笑很倾城</text> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword:'',
				hList:uni.getStorageSync('search_cache'),//历史记录
				hotWords:['微微一笑很倾城','火蓝刀锋']
			}
		},
		onLoad() {
			this.getHot();
		},
		methods: {
			getHot(){
				this.$http_request("/api.php/provide/search_hot/",{}).then(res=>{
					if(res.code==1){
						this.hotWords = res.list;
					}
					uni.showLoading({
						title: '加载中',
						mask:true
					});
				})
			},
			searchStart: function() {	//触发搜索
				let _this = this;
				if(_this.keyword==''){
					uni.showToast({
						title: '请输入关键字',
						icon: 'none',
						duration: 1000
					});
				}else{
					uni.getStorage({
						key:'search_cache',
						success(res){
							let list = res.data;
							if(list.length >5){
								for(let item of List){
									if(item == _this.keyword){
										return;
									}
								}
								list.pop();
								list.unshift(_this.keyword);
							}else{
								for(let item of list){
									if(item == _this.keyword){
										return;
									}
								}
								list.unshift(_this.keyword);
							}
							_this.hList = list;
							uni.setStorage({
								key: 'search_cache',
								data: _this.hList
							});
						},
						fail() {
							_this.hList = [];
							_this.hList.push(_this.keyword);
							uni.setStorage({
								key: 'search_cache',
								data: _this.hList
							});
						}
					})
				}
				console.log('搜索');
				uni.navigateTo({
					url:'/pages/search/search-list?item='+_this.keyword
				});	
			},
			keywordsClick (item) {	//关键词搜索与历史搜索
				this.keyword = item;
				uni.navigateTo({
					url:'/pages/search/search-list?item='+item
				});	
			},
			delhistory () {		//清空历史记录
				this.hList = [];
				uni.setStorage({
					key: 'search_cache',
					data: []
				});
			},
		}
	}
</script>

<style scoped>
	.status_bar {
	  height: var(--status-bar-height);
	  width: 100%;
	  text-overflow: ellipsis; 
	}
	.top{
		height: 120rpx;
		display: flex;
		
	}
	.top-tool{
		line-height: 120rpx;
		width: 100%;
		margin: 0 40rpx;
	}
	
	.record ,.hot{
		width: 90%;
		margin: auto;
		margin-bottom: 10rpx;
	}
	.title{
		font-size: larger;
	}
	.item{
		display: inline-flex;
		background-color: #F7F7F7;
		padding: 6rpx 10rpx;
		margin: 10rpx 10rpx;
		border-radius: 4rpx;
		color:#8A8A8A ;
	}
	.item1{
		display: inline-flex;
		padding: 6rpx 10rpx;
		margin: 10rpx 10rpx;
		border-radius: 4rpx;
		color:#8A8A8A ;
	}
</style>
